$(document).ready(function() {

    //第一列输入框点击确认显示输入的文字
    $('.table_box').on('click', '#input_text', function(event) {
        var input_text = $(this).prev('#input').val();
        if(input_text==""){
            alert('请输入文字！');
            $(this).prev('#input').focus();
        }else{
            $(this).parents('td').find('.show_text').show().html(input_text);
            $(this).parents('.input_box').hide();
        }
    });

    //第二，三列点击上传按钮获取文件路径存放到隐藏域的value值
    $('.table_box').on('change', '.file_upload', function(event) {
        var file_name = $(this).val();
        $(this).next('input').attr('value',file_name);
        $(this).parents('label').next('span').show();
        $(this).parents('label').hide();
    });

    //第二，三列鼠标悬浮到文件图标显示删除按钮
    $('.table_box').on('mouseover', '#file_img', function(event) {
        $(this).attr('src','images/hover_dele.png');
        $(this).addClass('dele_file');
        $(this).css({
            'position': 'relative',
            'left': '-8px',
            'top':'1px'
        });
    });
    $('.table_box').on('mouseout', '#file_img', function(event) {
        $(this).attr('src','images/file.png');
        $(this).removeClass('dele_file');
        $(this).css({
            'position': 'relative',
            'left': '0px',
            'top':'0px'
        });
    });

    //第二，三点击删除文件图标重新上传
    $('.table_box').on('click', '.dele_file', function(event) {
        if(confirm('确认删除所选文件吗？')){
            $(this).parent('span').hide();
            $(this).parent('span').prev('label').show();
            $(this).parent('span').prev('label').find('[type=hidden]').attr('value','');
        }else{
            return false;
        }
    });

    //第四列点击编辑按钮第一列显示input框
    $('.table_box').on('click', '#edit', function(event) {
        $(this).parents('tr').find('td:first .show_text').hide().html('');
        $(this).parents('tr').find('td:first .input_box').show();
        //$(this).parents('tr').find('td:first .input_box').find('input').val('');
    })

    //第四列点击删除按钮删除当前行
    $('.table_box').on('click', '#dele', function(event) {
        if(confirm('确认删除当前所在行的数据吗？')){
            $(this).parents('tr').remove();
        }else{
            return false;
        }
    })

    //第四列点击下移按钮移动当前行
    $('.table_box').on('click', '#next', function(event) {
        var this_parents = $(this).parents('tr');
        var parents_next = $(this).parents('tr').next('tr');
        if(parents_next.length>0){
            this_parents.before(parents_next);
        }else{
            alert('此行下级没有数据，无法下移！');
        }
    })

    //第四列点击上移按钮移动当前行
    $('.table_box').on('click', '#prev', function(event) {
        var this_parents = $(this).parents('tr');
        var parents_prev = $(this).parents('tr').prev('tr');
        if(parents_prev.length>0){
            this_parents.after(parents_prev);
        }else{
            alert('此行上级没有数据，无法上移！');
        }
    })

    //点击新增要件按钮添加一行数据
    var file_number = 1;
    var file_hid = 1;
    $('.add_yj button').click(function(event) {
        file_number++;
        file_hid++;
        var tr_html = '<td name="input">'
                        +'<p class="input_box"><input type="text" id="input"/><span id="input_text">确认</span></p>'
                        +'<span class="show_text"></span>'
                    +'</td>'
                    +'<td name="file_button">'
                        +'<label class="file_upload">'
                            +'<input type="file" name="file" class="file_upload" id="file_upload01_'+file_number+'" />'
                            +'<input type="hidden" id="file_hidden01_'+file_hid+'" />'
                            +'<span>上传</span>'
                        +'</label>'
                        +'<span><img src="images/file.png" id="file_img"></span>'
                    +'</td>'
                    +'<td name="file_name">'
                        +'<label class="file_upload">'
                            +'<input type="file" name="file" class="file_upload" id="file_upload02_'+file_number+'" />'
                            +'<input type="hidden" id="file_hidden02_'+file_hid+'"/>'
                            +'<span>上传</span>'
                        +'</label>'
                        +'<span><img src="images/file.png" id="file_img"></span>'
                    +'</td>'
                    +'<td>'
                        +'<span id="edit" title="编辑"><img src="images/icon01.png"></span>'
                        +'<span id="dele" title="删除"><img src="images/icon02.png"></span>'
                        +'<span id="next" title="下移"><img src="images/icon03.png"></span>'
                        +'<span id="prev" title="上移"><img src="images/icon04.png"></span>'
                    +'</td>';
        $('.table_box table tbody').append('<tr>'+tr_html+'</tr>');
        console.log(tr_html);
        $('.table_box table tbody tr:last').find('#input').val('');
        $('.table_box table tbody tr:last').find('.show_text').html('');
        $('.table_box table tbody tr:last').find('.input_box').show();
        $('.table_box table tbody tr:last').find('.show_text').hide();
    });

});